<template>
  <div class="custom-tree-container">
    <div class="block">
      <el-tree
      class="chapter"
        @node-click="handleNodeClick"
        :data="chapterList"
        accordion
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
        :render-content="renderContent"
      ></el-tree>
    </div>
  </div>
</template>
<script>
import ChapterInput from "./ChapterInput";
import {
  getChapterList,
  insertChapter,
  deleteChapter,
  updateChapter
} from "@/api/catalogue";

let id = 1000;

export default {
  created() {
    this.cno = this.$parent.cno;
    this.getChapterList();
  },
  data() {
    return {
      chapterList: [],
      cno: "",
      catalogue: "",
      c_visible: false,
      currentId: ""
    };
  },

  methods: {
    handleNodeClick(data) {
      this.$router.push({
        path: "chapter_explore",
        query: { chapterId: data.id }
      });
    },
    append(data) {
      this.catalogue = data;
      this.$router.push({
        path: "/chapter_input",
        query: { chapterId: data.id }
      });
    },
    update(data) {
      this.id = data.id;
      this.$router.push({
        path: "chapter_update",
        query: { chapterId: data.id ,cno:this.cno}
      });
    },
    // appendHtml(chapter) {
    //   const newChild = { id: chapter.id, label: chapter.label, children: [] };
    //   if (!chapter.children) {
    //     this.$set(chapter, "children", []);
    //   }
    //   chapter.children.push(newChild);
    // },
    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      children.splice(index, 1);
      this.deleteChapter(data.id);
    },

    renderContent(h, { node, data, store }) {
      return !this.isTeacher ? (
        <span class="custom-tree-node">
          <span>{node.label}</span>
        </span>
      ) : (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.append(data)}
            >
              新增子章节
            </el-button>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.remove(node, data)}
            >
              删除章节及子章节
            </el-button>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.update(data)}
            >
              修改
            </el-button>
          </span>
        </span>
      );
    },

    // 获取章节列表
    async getChapterList() {
      const { data: res } = await getChapterList(this.cno);
      this.chapterList = res.data.data;
    },

    // 获取表单输入的内容：创建
    getFormContent(chapter) {
      chapter.parentId = this.catalogue.id;
      this.insertChapter(chapter);
    },

    // 插入章节
    async insertChapter(chapter) {
      const { data: res } = await insertChapter(chapter);
      this.postStatud(res);
    },

    // 删除章节
    async deleteChapter(id) {
      const { data: res } = await deleteChapter(id, this.cno);
      this.postStatud(res);
    },

    // 更新章节
    async updateChapter(label, id, content) {
      const { data: res } = await updateChapter(label, id, content);
      this.postStatud(res);
    },

    postStatud(res) {
      if (res.code == 20000) {
        this.$notify.success({ title: "操作成功", message: res.message });
      } else {
        this.$message.error(res.message);
      }
    }
  },
  components: {
    ChapterInput
  },
  computed: {
    isTeacher() {
      const type = this.$store.state.user.type;
      if (type == "2") {
        return true;
      } else {
        return false;
      }
    }
  }
};
</script>

<style>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 18px;
}
.chapter{
  
}
</style>